<template>
	<view class="mine">
		<view class="mine_header">
			<view class="mine_herder_info">
				<view class="mine_herder_info_left" @click="handleClick('mine/personalInformation')">
					<image :src="userInfo?.avatar" v-if="userInfo?.avatar"></image>
					<image src="http://qianxueapplet.suoeryun.com/avatar.png" v-else>
					</image>
					<view class="mine_herder_info_left_text">
						<view>{{userInfo?.realname}}
							<!-- <image src="http://qianxueapplet.suoeryun.com/edit.png"
								class="mine_herder_info_left_text_img">
							</image> -->
						</view>
						<!-- <view>{{userInfo?.phone}}</view> -->
					</view>
				</view>
				<view class="mine_herder_info_right" @click="handleClick('mine/message')">
					<image src="http://qianxueapplet.suoeryun.com/message.png" class="">
					</image>
					<text v-if="value?.total">{{value?.total}}</text>
				</view>
			</view>
			<view class="mine_herder_dynamic">
				<view class="mine_herder_dynamic_item" @click="handleClick('mine/attention')">
					<text>{{count?.followers}}</text>
					<text>关注</text>
				</view>
				<view class="mine_herder_dynamic_line"></view>
				<view class="mine_herder_dynamic_item" @click="handleClick('mine/fans')">
					<text>{{count?.fans}}</text>
					<text>粉丝</text>
				</view>
				<view class="mine_herder_dynamic_line"></view>
				<view class="mine_herder_dynamic_item" @click="handleClick('mine/dynamic')">
					<text>{{count?.dynamics}}</text>
					<text>动态</text>
				</view>
			</view>
			<!-- <view class="mine_herder_integration">
				<image src="http://qianxueapplet.suoeryun.com/mineCard.png" class="mine_herder_integration_bg"></image>
				<view class="mine_herder_integration_body">
					<view class="mine_herder_integration_left">
						<text>积分：</text>
						<text>48</text>
					</view>
					<text class="mine_herder_integration_right">签到领积分</text>
				</view>
			</view> -->
			<view class="mine_herder_function">
				<view @click="handleClick('mine/cloudAlbum')">
					<image src="http://qianxueapplet.suoeryun.com/cloudAlbum.png"></image>
					<text>云相册</text>
				</view>
				<view @click="handleClick('goodStuff/myOrder')">
					<image src="http://qianxueapplet.suoeryun.com/myOrder.png"></image>
					<text>我的订单</text>
				</view>
				<view @click="handleClick('mine/receivingAddress')">
					<image src="http://qianxueapplet.suoeryun.com/receivingAddress.png">
					</image>
					<text>收货地址</text>
				</view>
				<view @click="handleClick('mine/myCollection')">
					<image src="http://qianxueapplet.suoeryun.com/myCollection.png"></image>
					<text>我的收藏</text>
				</view>
				<!-- <view @click="handleClick('')">
					<image src="http://qianxueapplet.suoeryun.com/feedback.png"></image>
					<text>意见反馈</text>
				</view> -->
			</view>
		</view>
		<view class="mine_body">
			<view class="mine_body_card">
				<view class="mine_body_card_title">
					<text class="mine_body_card_title_left">亲子</text>
					<text class="mine_body_card_title_fun" @click="handleClick('mine/parentChildManagement')">管理</text>
				</view>
				<view class="mine_body_card_body">
					<template v-if="childList?.length > 0">
						<view class="mine_body_card_body_item" v-for="item in childList" :key="item?.id"
							@click="handleEditChild(item)">
							<image :src="item?.avatar" class="border_radius" v-if="item?.avatar"></image>
							<image src="http://qianxueapplet.suoeryun.com/child.png" class="border_radius" v-else>
							</image>
							<text>{{item?.studentName}}</text>
						</view>
					</template>
					<image src="http://qianxueapplet.suoeryun.com/mineNotChild.png" class="mine_body_card_body_not"
						v-else></image>
				</view>
			</view>
			<view class="mine_body_card">
				<view class="mine_body_card_title">
					<text class="mine_body_card_title_left">体验中心</text>
				</view>
				<view class="mine_body_card_body">
					<view class="mine_body_card_body_item" @click="handleClick('')">
						<image src="http://qianxueapplet.suoeryun.com/professionalExperience.png">
						</image>
						<text>职业体验</text>
					</view>
					<view class="mine_body_card_body_item" @click="handleClick('')">
						<image src="http://qianxueapplet.suoeryun.com/careerPark.png">
						</image>
						<text>生涯游园</text>
					</view>
				</view>
			</view>
			<view class="mine_body_card">
				<view class="mine_body_card_title">
					<text class="mine_body_card_title_left">测评中心</text>
				</view>
				<view class="mine_body_card_body">
					<view class="mine_body_card_body_item" @click="handleClick('')">
						<image src="http://qianxueapplet.suoeryun.com/careerAssessment.png">
						</image>
						<text>生涯测评</text>
					</view>
					<view class="mine_body_card_body_item" @click="handleClick('')">
						<image src="http://qianxueapplet.suoeryun.com/comprehensiveinterpretation.png">
						</image>
						<text>综合解释</text>
					</view>
					<view class="mine_body_card_body_item" @click="handleClick('')">
						<image src="http://qianxueapplet.suoeryun.com/evaluationReport.png">
						</image>
						<text>测评报告</text>
					</view>
				</view>
			</view>
			<view class="mine_body_card">
				<view class="mine_body_card_title">
					<text class="mine_body_card_title_left">探索中心</text>
				</view>
				<view class="mine_body_card_body">
					<view class="mine_body_card_body_item" @click="handleClick('')">
						<image src="http://qianxueapplet.suoeryun.com/collegeLibrary.png">
						</image>
						<text>院校库</text>
					</view>
					<view class="mine_body_card_body_item" @click="handleClick('')">
						<image src="http://qianxueapplet.suoeryun.com/professionalLibrary.png">
						</image>
						<text>专业库</text>
					</view>
					<view class="mine_body_card_body_item" @click="handleClick('')">
						<image src="http://qianxueapplet.suoeryun.com/careerLibrary.png">
						</image>
						<text>职业库</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, getCurrentInstance, unref } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { queryNumberList, queryBindingStudentsList, queryMyCorrelationNumber } from "@/config/mine.api";

	const userInfo = ref();
	const childList = ref([]);

	// 通知计数
	const value = ref();
	// 动态计数
	const count = ref();
	const { proxy } = getCurrentInstance();

	onLoad(() => {
		if (unref(proxy['vuex_token']) === '') {
			return uni.redirectTo({
				url: 'pages/login/login'
			})
		}
		userInfo.value = unref(proxy['vuex_user']);
	})

	onShow(async () => {
		userInfo.value = unref(proxy['vuex_user']);
		// 查询消息个数
		const res = await queryNumberList({});
		value.value = res;
		// 查询亲子列表
		const data = await queryBindingStudentsList({});
		// 查询关注/动态/粉丝个数
		const res1 = await queryMyCorrelationNumber({});
		count.value = res1;
		childList.value = data;
	})

	/**
	 * 跳转
	 * @param {Object} path 路径
	 */
	function handleClick(path) {
		if (!path) {
			return uni.showToast({
				icon: 'none',
				title: '敬请期待 . . .'
			})
		}
		// 测试 打开小程序
		if (path === 'minielm') {
			uni.navigateToMiniProgram({
				appId: 'wxece3a9a4c82f58c9',
				path: 'ele-estore/ele-takeout-index/ele-takeout-index?shopId=E12496737857128239966',
				success(res) {
				}
			})
			return
		}
		// 测试 打开小程序
		if (path === 'mini') {
			uni.navigateToMiniProgram({
				appId: 'wx2c348cf579062e56',
				path: 'sub_inner_pages/evaluate-list/evaluate-list',
				success(res) {
				}
			})
			return
		}
		let params = {};
		uni.$u.route(`pages/${path}`, params)
	}

	/**
	 * 编辑孩子信息
	 */
	function handleEditChild(item) {
		uni.$u.route('pages/mine/parentChildBinding', { id: item?.id })
	}
</script>

<style lang="scss" scoped>
	.mine {

		// 头部
		.mine_header {
			background-color: $uni-bg-primary;

			// 个人信息
			.mine_herder_info {
				padding: 20rpx 74rpx 24rpx 42rpx;
				display: flex;
				justify-content: space-between;

				.mine_herder_info_left {
					display: flex;
					align-items: center;

					image {
						width: 94rpx;
						height: 94rpx;
						border-radius: 50%;
						margin-right: 32rpx;
					}

					.mine_herder_info_left_text {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						view {
							color: #FFFFFF;
							font-weight: 500;

							.mine_herder_info_left_text_img {
								width: 48rpx;
								height: 48rpx;
								vertical-align: bottom;
							}

							&:nth-child(1) {
								font-size: 40rpx;
								line-height: 50rpx;
							}

							&:nth-child(2) {
								font-size: 24rpx;
							}
						}
					}
				}

				.mine_herder_info_right {
					position: relative;

					image {
						width: 36rpx;
						height: 40rpx;
					}

					text {
						position: absolute;
						top: -10rpx;
						right: -20rpx;
						font-size: 20rpx;
						background-color: #FF3636;
						border-radius: 50%;
						width: 30rpx;
						height: 30rpx;
						color: white;
						text-align: center;
						line-height: 30rpx;
					}
				}
			}

			// 动态
			.mine_herder_dynamic {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 8rpx 32rpx 20rpx 32rpx;
				color: #FFFFFF;

				.mine_herder_dynamic_item {
					display: flex;
					flex-direction: column;
					align-items: center;

					&>text {
						&:nth-child(1) {
							display: inline-block;
							font-size: 36rpx;
							margin-bottom: 10rpx;
							font-weight: bold;
						}

						&:nth-child(2) {
							font-size: 28rpx;
						}
					}
				}

				.mine_herder_dynamic_line {
					width: 2rpx;
					height: 32rpx;
					background-color: #FBC190;
				}
			}

			// 积分
			.mine_herder_integration {
				margin: 0 24rpx;
				width: 94%;

				.mine_herder_integration_bg {
					position: relative;
					width: 100%;
					height: 160rpx;
					z-index: 1;
				}

				.mine_herder_integration_body {
					position: relative;
					top: -140rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 50rpx;
					z-index: 1;

					.mine_herder_integration_left {

						text {
							&:nth-child(1) {
								color: #D6C386;
								font-size: 28rpx;
							}

							&:nth-child(2) {
								color: #FAD07A;
								font-size: 48rpx;
								vertical-align: middle;
							}
						}
					}
				}

				.mine_herder_integration_right {
					padding: 10rpx 28rpx;
					border-radius: 254rpx;
					background-color: #F9E3B2;
					font-size: 24rpx;
					font-weight: 500;
				}
			}

			// 功能区域
			.mine_herder_function {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 84rpx 20rpx 84rpx;
				background-color: #FFFFFF;
				position: absolute;
				width: 78%;
				// top: 276rpx;
				// padding-top: 70rpx;
				margin-top: 24rpx;

				view {
					display: flex;
					flex-direction: column;
					align-items: center;
					cursor: pointer;

					image {
						width: 80rpx;
						height: 80rpx;
					}

					text {
						font-size: 28rpx;
						color: #333333;
						margin-top: 10rpx;
						font-weight: 600;
					}
				}
			}
		}

		//主体
		.mine_body {
			position: relative;
			// top: 115rpx;
			top: 188rpx;
			padding-bottom: 20rpx;

			// 卡片
			.mine_body_card {

				margin: 24rpx 24rpx 0 24rpx;
				background-color: #FFFFFF;
				border-radius: 24rpx;
				padding: 24rpx;

				.mine_body_card_title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;

					text {
						flex: 1;
					}

					.mine_body_card_title_left {
						color: #333333;
						font-size: 32rpx;
						font-weight: 600;
					}

					.mine_body_card_title_fun {
						color: #FF943C;
						font-size: 28rpx;
						// cursor: pointer;
						text-align: right;
					}
				}
			}

			.mine_body_card_body {

				.mine_body_card_body_item {
					display: inline-block;
					width: 25%;
					text-align: center;
					font-weight: 600;
					cursor: pointer;

					image {
						width: 80rpx;
						height: 80rpx;
					}

					.border_radius {
						border-radius: 50%;
					}

					text {
						display: block;
						font-size: 28rpx;
					}
				}

				.mine_body_card_body_not {
					display: block;
					width: 158rpx;
					height: 136rpx;
					margin: 0 auto;
				}
			}
		}
	}
</style>